<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title th:text="${article.title} + ' ~ 浪海博客'"></title>
		<meta charset="utf-8" />
		<meta name="keywords" th:content="${article.title} + ',浪海博客,' + ${article.author}" />
		<meta name="description" th:content="${article.author} + '编写的' + ${article.title}" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="/blogs/assets/css/main.css" />
		<noscript><link rel="stylesheet" href="/blogs/assets/css/noscript.css" /></noscript>
		<style>
			#vcomments p, #vcomments textarea {
				color: #00FF00;
			}
		</style>
	</head>
	<body class="is-preload">

		<!-- Header -->
			<header id="header">
				<a href="/" class="title">浪海博客</a>
				<nav>
					<ul>
						<li><a href="/">主页</a></li>
						<li><a href="/user/personalPage" >个人空间</a></li>
						<li><a href="javascript:void(0)" id="loginOut">安全退出</a></li>
					</ul>
				</nav>
			</header>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<section id="main" class="wrapper">
						<div class="inner">
							<h1 class="major" th:text="${article.title} + ' ~ ' + ${article.author}"></h1>
							<span class="image fit"><img src="/blogs/images/personal.jpg" alt="林书豪" /></span>
							<section>
								<div th:text="${article.addTimeShow}"></div>
								<div>
									<span th:text="${article.title}"></span>
									<span th:text="'浪海值：' + ${article.heat} + '度'"></span><br />
									<span th:text="'文章标签：' + ${article.labelContent}"></span><br />
									<span th:text="'文章摘要：' + ${article.abstractText}"></span><br />
									<span>
										使用新的显示器：<a th:href="'/article/articleShowNew?id=' + ${article.id} + '&password=' + ${password}">新的显示器</a>
										<span>如果遇到图片单击即可放大/缩小。</span>
									</span><br />
								</div>
								<div th:utext="${article.html}">

								</div>
								<div id="vcomments"></div>
								<div>
									<p id="vCodeStatus"></p>
									<input type="hidden" name="articleId" id="articleId" th:value="${article.id}">
									<label for="content">发表评论</label>
									<textarea name="content" id="content" placeholder="请输入内容 这里需要进行登录 上面的评论框无需登录" rows="5"></textarea>
									<a href="javascript:void(0)" class="button primary" id="submitComment">提交评论</a>
								</div>
								<div>
									<ul class="blog-comment" id="blog-comment">
										<span th:each="comment : ${commentList}">
											<li th:text="'评论时间：'+ ${comment.addTimeShow} + ' 用户昵称：' + ${comment.nickname}"></li>
											<li th:text="'评论内容：'+ ${comment.content}"></li>
										</span>
									</ul>
								</div>
							</section>
						</div>
					</section>

			</div>

		<!-- Footer -->
			<footer id="footer" class="wrapper alt">
				<div class="inner">
					<ul class="menu">
						<li>&copy; <a href="http://www.langhai.cc">浪海博客</a>. All rights reserved.</li><li>个人网站 2021 ~ 2029年</li>
						<li><a href="https://gitee.com/langhai666/langhai-blog" target="_blank" >gitee</a></li>
						<li><a href="https://github.com/Allenkuzma/langhaiblogs" target="_blank" >github</a></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="/blogs/assets/js/jquery.min.js"></script>
			<script src="/blogs/assets/js/jquery.scrollex.min.js"></script>
			<script src="/blogs/assets/js/jquery.scrolly.min.js"></script>
			<script src="/blogs/assets/js/browser.min.js"></script>
			<script src="/blogs/assets/js/breakpoints.min.js"></script>
			<script src="/blogs/assets/js/util.js"></script>
			<script src="/blogs/assets/js/main.js"></script>
			<script src="/blogs/assets/js/Valine.min.js"></script>

		<script>
			// 退出登录
			$("#loginOut").click(function () {
				$.ajax({
					url: "/user/loginOut",
					async: true,
					type: "POST",
					success: function (data) {
						if(data.code == 200){
							$("#vCodeStatus").html("用户安全退出，3秒后为你跳转到首页。");
							setTimeout(function(){
								window.location.href = "/";
							}, 3000);
						}else {
							 $("#vCodeStatus").html(data.message);
						}
					}
				})
			})

			// 图片自适应处理
			$(function (){
				$("img").addClass("image fit");
			})

			// 提交文章评论
			$(function () {
				$("#submitComment").on("click", function () {
					$.ajax({
						url: "/article/submitComment",
						async: true,
						type: "POST",
						data: {
							"articleId": $("#articleId").val(),
							"content": $("#content").val()
						},
						success: function (data) {
							$("#content").val('');
							if(data.code == 200){
								$("#vCodeStatus").html(data.message);
								setTimeout(function(){
									window.location.reload();
								}, 1000);
							}else {
								$("#vCodeStatus").html(data.message);
							}
						}
					})
				});
			})

			var originalStyle;
			// 图片放大处理
			$("body").on("click", "img", function(){
				if ($(this).hasClass("zoomed")) {
					$(this).removeClass("zoomed"); // 移除放大样式类
					$(this).attr("style", originalStyle);
				} else {
					originalStyle = $(this).attr("style");
					$(this).addClass("zoomed"); // 添加放大样式类
					$(this).attr("style", "width: 100%;");
				}
			})
		</script>
		<script>
			$(function() {
				var url = window.location.href;
				var queryString = url.split('?')[1];
				var params = {};
				var queries = queryString.split("&");
				for (var i = 0; i < queries.length; i++) {
					var temp = queries[i].split('=');
					params[temp[0]] = temp[1];
				}

				var valineId = params['id'];
				new Valine({
					el: '#vcomments',
					appId: 'Axey6XbAW71MYHWx340EexnY-gzGzoHsz',
					appKey: 'XviuojwN4nJ4VL3agPeSynjB',
					avatar: 'monsterid',
					placeholder: "浪海博客欢迎你 无需登录更加方便 ~ ",
					path: valineId
				})
			})
		</script>
	</body>
</html>